<template>
	<view class="content">
		<u-navbar class="head" leftIcon="" :fixed="false" :safeAreaInsetTop="true"
			style="z-index: 99999999;position: relative;">
			<view class="u-nav-slot" slot="right">
				<m-capsule :closeHandler="CloseShopPage"></m-capsule>
			</view>
		</u-navbar>

		<web-view v-if="ShowWebView" ref="webview" fullscreen="false" @message="message" :webview-styles="webviewStyles"
			class="uni-flex-item" :src="OrderUrl">
		</web-view>


		<view class="tabbar-container">
			<!-- <block> -->
			<view class="tabbar-item" v-for="(item, index) in tabbarList" @click="changeItem(item)"
				:class="[currentItem == item.id ? 'item-active' : '']">
				<view class="item-top">
					<uni-icons :type="item.icon" :class="[currentItem == item.id ? 'item-active' : 'TabbarIcon']"
						size="28"></uni-icons>
				</view>
				<view class="item-bottom">
					<text>{{ item.text }}</text>
				</view>
			</view>
			<!-- </block> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ShowWebView: true,
				currentItem: 0, // 底部导航
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				currentWebview: {},
				OrderUrl: '', // web-view地址
				tabbarList: [{
						id: 0,
						path: '',
						icon: 'home',
						selectIcon: '',
						text: '主页',
					},
					{
						id: 1,
						path: '',
						icon: 'settings-filled',
						selectIcon: '',
						text: '分类',
					},
					// {
					// 	id: 2,
					// 	path: '',
					// 	icon: 'cart',
					// 	selectIcon: '',
					// 	text: '购物车',
					// },
					// {
					// 	id: 3,
					// 	path: '',
					// 	icon: 'person',
					// 	selectIcon: '',
					// 	text: '我的',
					// }
				],
				typeList: [],
			};
		},
		onLoad() {
			var that = this;

			setTimeout(() => {

				that.getTypes();

				that.OrderUrl = '/hybrid/html/qms/ShopPage/html/index.html';
				that.currentWebview = that.$scope.$getAppWebview().children()[0];

				that.$scope.$getAppWebview().children()[0].evalJS(`vm.GetVersion('${plus.runtime.version}')`);

			}, 300)
		},
		onShow() {},
		onReady() {

			let height = 0; //定义动态的高度变量 
			let navbarHeight = 0;
			uni.getSystemInfo({ // 获取当前设备的具体信息
				success: (sysinfo) => {
					// 总盒子高度
					height = sysinfo.windowHeight;
					// 导航栏高度
					uni.createSelectorQuery().select('.head').boundingClientRect(data => {
						navbarHeight = data.height
						height = height - data.height
						let currentWebview = this.$scope.$getAppWebview().children()[0]; //获取当前web-view
						var wv = currentWebview;
						wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
							top: navbarHeight, //此处是距离顶部的高度，应该是你页面的头部
							height: height - 64, //webview的高度, 64 是固定给底部栏的
						})

					}).exec()

				}
			});
		},
		methods: {
			message() {},
			isIos() {
				const info = wx.getSystemInfoSync()
				if (info.system.indexOf('Android') > -1) {
					// console.log('安卓')
					// // this.ios = false
					return 'android'
				} else {
					// console.log('ios')
					return 'ios'
					// uni.getDeviceInfo().deviceType
					// this.ios = true
				}
			},
			getTypes() {
				var that = this;
				let systemType = that.isIos()

				let IP = 'http://' + that.Request.ShopServiceIP(1) + '/Frame/SqlData?cmdname=' + 'sp_allProductType' +
					'&platform=' + systemType
				that.Request.request('sp_allProductType', {}, function(res) {
					// console.log(JSON.stringify(res))
					if (res.status == 200) {
						that.typeList = res.data.ds
					}
				}, function(err) {
					console.log(JSON.stringify(err))
				}, IP)
				// FLD.ajax('sp_allProductType', {}, function(res) {
				// 	that.typeList = res.ds;
				// })
			},
			changeItem(item) {
				let that = this;
				if (item.id != 2) {
					that.currentItem = item.id
				}

				let url = ''
				if (item.id == 0) {
					url = 'index'
				} else if (item.id == 1) {
					url = 'channel';
					that.OrderUrl = '/hubird/html/qms/ShopPage/html/' + url + '.html'

					var detailTypeList = [];
					var repeatNode = function(id) {
						var node = []
						for (var i in that.typeList) {
							if (id == that.typeList[i].ParentCategoryId) {
								var newNode = that.typeList[i];
								newNode.typeNode = repeatNode(that.typeList[i].CategoryId);
								node.push(newNode);
							}
						}
						return node;
					}
					detailTypeList = repeatNode(0);

					let datas = {
						data: detailTypeList,
						where: 'tabbar',
					};

					setTimeout(() => {

						that.$scope.$getAppWebview().children()[0].evalJS(
							`vm.SetDetailTypeList('${JSON.stringify(datas)}')`);
						// that.currentWebview.evalJS(`vm.SetDetailTypeList('${2}')`);
					}, 500)
					return
					// window.localStorage.setItem('detailTypeList', JSON.stringify(detailTypeList))
				} else if (item.id == 2) {
					// url = 'shoppingCart'
					uni.navigateTo({
						url: "/pages/shop/ShopCar?url=shoppingCart"
					});
					return
				} else if (item.id == 3) {
					url = 'userMenu'
				}
				that.OrderUrl = '/hubird/html/qms/ShopPage/html/' + url + '.html'
			},
			CloseShopPage() { // 关闭商城
				var that = this;
				// console.log(this.OrderUrl)
				that.ShowWebView = false;
				setTimeout(() => {

					uni.navigateBack({
						delta: 999
					})
				}, 50)
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.content {
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height)
		background-color: #51d0d0;

		.tabbar-container {
			position: fixed;
			z-index: 99999;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 63px;
			box-shadow: -1px 0 9px -5px #999;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 5px 0;
			background-color: #fff;
			color: #333;
			// color: #fff;
			// background-color: #3a3a3a;
		}

		.tabbar-container .tabbar-item {
			// width: 20%;
			height: 60px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.tabbar-container .item-active {
			/* color: #4cbbff; */
			color: #51d0d0 !important;
		}

		.tabbar-container .tabbar-item .item-top {
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;

			.TabbarIcon {
				color: #333 !important;
				// width: fit-content;
				// margin: 6px auto 0 !important;
			}
		}

		.tabbar-container .tabbar-item .item-bottom {
			font-size: 14px;
			width: 100%;
			text-align: center;
			background-color: freen;
		}
	}
</style>